/**
 * 基础菜单 我的用户管理  自定义页面
 */
<template>
  <div style="float: left;width: 100%;">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">考试管理</el-breadcrumb-item>
      <el-breadcrumb-item>查看试卷</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
        <div style="border: #BBBBBB solid 1px;width: 100%;height: 120px;margin-top: 20px;margin-bottom: 20px;">
            <p style="text-align: center;">
              <span style="font-size: 40px">{{this.formInline.UserExam.information.examName}}</span><br><br>
              <span>考生姓名：{{this.formInline.UserExam.user.name}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <span>考试时长：{{this.formInline.UserExam.information.allTime}} 分钟</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <span style="color: red;font-size: 20px;">总分：{{this.formInline.UserExam.cord}} 分</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <span style="color: red;font-size: 20px;">满分：{{this.listData.paper.singleTotal+this.listData.paper.multipleTotal+this.listData.paper.judgeTotal+this.listData.paper.fillTotal+this.listData.paper.shortTotal}} 分</span>
            </p>
        </div>
        <div>
          <div style="width: 70%;float: left;">
          <!-- 单选-->
            <div v-if="this.single.length>0">
              <p>单选题 ( 每题 {{this.listData.paper.singleDefault}} 分)</p>
              <div style="border:#C8C9CC solid 1px" >
                <div v-for="(singleque,index) in this.single" style="margin-left: 20px;" :id="'sin'+index">
                  <div>
                  <p>{{index+1}}. {{singleque.title}}( {{optionAnswer.sin[index]}} ):
                  <i class="el-icon-check" v-if="optionAnswer.sin[index] == trueAnswer.truesin[index]" style="color:#13CE66;font-size: 30px;"></i>
                  <i class="el-icon-close" v-if="optionAnswer.sin[index] != trueAnswer.truesin[index]" style="color:red;font-size: 30px;"></i>
                  </p>

                    <ol type="A">
                      <li v-for="(option,sinindex) in singleque.optionList" style="margin-bottom: 10px;">
                      {{option.content}}
                      <input type="radio" v-model="useranswer.singleanswer[index]" :value="sinindex+1+':'+option.id" />
                      </li>
                    </ol>
                    <el-divider style="background-color: #F5DAB1;"><i class="el-icon-edit"></i></el-divider>
                    <!-- <hr style="border: #F5DAB1 dashed 1px;"/> -->
                    <p >学生答案：{{optionAnswer.sin[index]}}</p>
                    <p>正确答案：<span style="color: #F56C6C;">{{trueAnswer.truesin[index]}}</span></p>
                    <p>答案解析：<span style="color: #F56C6C;">{{singleque.analysis}}</span></p>
                     <!-- <hr color="#CF9236" size="1" width="1000"/> -->
                  </div>
                </div>
              </div>
            </div>
            <!-- 多选题-->
            <div v-if="this.multiple.length>0">
              <p>多选题 ( 每题 {{this.listData.paper.multipleDefault}} 分)</p>
              <div style="border: #C8C9CC solid 1px" >
                <div v-for="(multipleque,index2) in this.multiple" style="margin-left: 20px;" :id="'multi'+index2">
                  <div v-if="multipleque.type==2">
                  <p>{{index2+1}}. {{multipleque.title}}( {{optionAnswer.multiple[index2]}} ):
                  <i class="el-icon-check" v-if="optionAnswer.multiple[index2] == trueAnswer.truemultiple[index2]" style="color:#13CE66;font-size: 30px;"></i>
                  <i class="el-icon-close" v-if="optionAnswer.multiple[index2] != trueAnswer.truemultiple[index2]" style="color:red;font-size: 30px;"></i>
                  </p>
                    <ol type="A">
                      <li v-for="(option2,mulindex) in multipleque.optionList" style="margin-bottom: 10px;">
                      {{option2.content}}
                       <input type="checkbox" v-model="useranswer.multipleanswer" :value="index2+':'+(mulindex+1)+':'+option2.id" />
                      </li>
                    </ol>
                    <el-divider><i class="el-icon-edit"></i></el-divider>
                    <!-- <hr style="border: #F5DAB1 dashed 1px;"/> -->
                    <p >学生答案：{{optionAnswer.multiple[index2]}}</p>
                    <p>正确答案：<span style="color: #F56C6C;">{{trueAnswer.truemultiple[index2]}}</span></p>
                    <p>答案解析：<span style="color: #F56C6C;">{{multipleque.analysis}}</span></p>
                     <!-- <el-divider style="background-color: #F5DAB1;"><i class="el-icon-edit"></i></el-divider> -->
                  </div>
                </div>
              </div>
            </div>
            <!-- 判断题-->
            <div v-if="this.judge.length>0">
              <p>判断题 ( 每题 {{this.listData.paper.judgeDefault}} 分)</p>
              <div style="border: #C8C9CC solid 1px" >
                <div v-for="(question3,index3) in this.judge" style="margin-left: 20px;" :id="'judge'+index3">
                  <div v-if="question3.type==3">
                  <p>{{index3+1}}. {{question3.title}}:
                  <i class="el-icon-check" v-if="useranswer.judgeanswer[index3] == question3.answer" style="color:#13CE66;font-size: 30px;"></i>
                  <i class="el-icon-close" v-if="useranswer.judgeanswer[index3] != question3.answer" style="color:red;font-size: 30px;"></i>
                  </p>
                  <p>
                  <input type="radio" v-model="useranswer.judgeanswer[index3]" value="true"/>True&nbsp;&nbsp;
                  <input type="radio" v-model="useranswer.judgeanswer[index3]" value="false"/>False
                  </p>
                  <el-divider><i class="el-icon-edit"></i></el-divider>
                  <!-- <hr style="border: #F5DAB1 dashed 1px;"/> -->
                  <p>学生答案：{{useranswer.judgeanswer[index3]}}</p>
                  <p>正确答案：<span style="color: #F56C6C;">{{question3.answer}}</span></p>
                  <p>答案解析：<span style="color: #F56C6C;">{{question3.analysis}}</span></p>
                   <!-- <el-divider style="background-color: #F5DAB1;"><i class="el-icon-edit"></i></el-divider> -->
                  </div>
                </div>
              </div>
            </div>
            <!-- 填空题-->
            <div v-if="this.fill.length>0">
              <p>填空题 ( 每题 {{this.listData.paper.fillDefault}} 分)</p>
              <div style="border: #C8C9CC solid 1px" >
                <div v-for="(question4,index4) in this.fill" style="margin-left: 20px;" :id="'fill'+index4">
                  <div v-if="question4.type==4">
                  <p>{{index4+1}}. {{question4.title}}:</p>
                  <el-divider><i class="el-icon-edit"></i></el-divider>
                    <!-- <hr style="border: #F5DAB1 dashed 1px;"/> -->
                    <p >学生答案：{{useranswer.fillanswer[index4]}}</p>
                    <p>正确答案：<span style="color: #F56C6C;">{{question4.answer}}</span></p>
                    <p>答案解析：<span style="color: #F56C6C;">{{question4.analysis}}</span></p>
                     <!-- <el-divider style="background-color: #F5DAB1;"><i class="el-icon-edit"></i></el-divider> -->
                  <!-- <p>答：
                  <el-input style="width: 300px;" v-model="useranswer.fillanswer[index4]" value="" placeholder="请输入答案">
                  <i
                      class="el-icon-edit el-input__icon"
                      slot="suffix"
                     >
                    </i>
                  </el-input>
                  </p> -->
                  </div>
                </div>
              </div>
            </div>
            <!-- 简答题-->
            <div v-if="this.short.length>0">
              <p>简答题 ( 每题 {{this.listData.paper.shortDefault}} 分)</p>
              <div style="border: #C8C9CC solid 1px" >
                <div v-for="(question5,index5) in this.short" style="margin-left: 20px;" :id="'short'+index5">
                  <div v-if="question5.type==5">
                  <p>{{index5+1}}. {{question5.title}}:</p>
                  <el-divider><i class="el-icon-edit"></i></el-divider>
                    <!-- <hr style="border: #F5DAB1 dashed 1px;"/> -->
                    <p >学生答案：{{useranswer.shortanswer[index5]}}</p>
                    <p>正确答案：<span style="color: #F56C6C;">{{question5.answer}}</span></p>
                    <p>答案解析：<span style="color: #F56C6C;">{{question5.analysis}}</span></p>
                     <!-- <el-divider style="background-color: #F5DAB1;"><i class="el-icon-edit"></i></el-divider> -->
                  <!-- <p style="margin-right: 50px;">
                    <el-input
                      type="textarea"
                      :rows="5"
                      maxlength="30"
                      placeholder="请输入内容"
                      value=""
                      v-model="useranswer.shortanswer[index5]">
                    </el-input>
                  </p> -->
                  </div>
                </div>
              </div>
            </div>
            </div>
        </div>
        <!-- 设置悬浮框-->
        <up ref="sticky_">
        <div style="border:#C8C9CC solid 1px;width: 27%;height: 400px;float: left;margin-top: 52px;margin-left: 20px;overflow-y: auto;">
          <up ref="sticky_">
            <div style="background-color: rgba(0,0,0,0.2);height: 40px;line-height: 40px;">
              <span style="color: white;">&nbsp;&nbsp;|&nbsp;&nbsp;答题卡&nbsp;</span>
              <el-button size="mini" type="danger" plain @click="back()">返回</el-button>
            </div>
          </up>
          <!-- 单选-->
            <div v-if="this.single.length>0" style="float: left;width: 100%;">
              <p>&nbsp;&nbsp;单选题</p>
              <div v-for="(singleque,index) in this.single" style="margin-left: 20px;float: left;margin-bottom: 5px;">
                <button v-if="useranswer.singlewrong[index]==index" style="border: #DD6161 1px solid;border-radius: 17px;width: 34px;background-color: #DD6161;height: 34px;vertical-align:middle;
          text-align: center;font-size: 2px;font-weight: 300;color: white;" @click="sinskip(index)">{{index+1}}</button>
                <button v-if="useranswer.singlewrong[index]==-1" @click="sinskip(index)" style="border: #A4DA89 1px solid;border-radius: 17px;width: 34px;background-color: #A4DA89;height: 34px;vertical-align:middle;
          text-align: center;font-size: 2px;font-weight: 300;color: white;">{{index+1}}</button>
          <!-- <button @click="sinskip(index)" style="border: #EBB563 1px solid;border-radius: 17px;width: 34px;background-color: #EBB563;height: 34px;vertical-align:middle;
          text-align: center;font-size: 2px;font-weight: 300;color: white;">{{index+1}}</button> -->
              </div>
            </div>
            <!-- 多选-->
            <div v-if="this.multiple.length>0" style="float: left;width: 100%;">
              <p>&nbsp;&nbsp;多选题</p>
              <div v-for="(multipleque,index2) in this.multiple" style="margin-left: 20px;float: left;margin-bottom: 5px;">
                  <button v-if="useranswer.multiwrong[index2]==index2" style="border: #DD6161 1px solid;border-radius: 17px;width: 34px;background-color: #DD6161;height: 34px;vertical-align:middle;
              text-align: center;font-size: 2px;font-weight: 300;color: white;" @click="multiskip(index2)">{{index2+1}}</button>
                  <button v-if="useranswer.multiwrong[index2]==-1 && useranswer.multihalf[index2]==-1" @click="multiskip(index2)" style="border: #A4DA89 1px solid;border-radius: 17px;width: 34px;background-color: #A4DA89;height: 34px;vertical-align:middle;
              text-align: center;font-size: 2px;font-weight: 300;color: white;">{{index2+1}}</button>
                  <button v-if="useranswer.multihalf[index2]==index2" @click="multiskip(index2)" style="border: #EBB563 1px solid;border-radius: 17px;width: 34px;background-color: #EBB563;height: 34px;vertical-align:middle;
              text-align: center;font-size: 2px;font-weight: 300;color: white;">{{index2+1}}</button>
              </div>
            </div>
            <!-- 判断题-->
          <div v-if="this.judge.length>0" style="float: left;width: 100%;margin-bottom: 5px;">
            <p>&nbsp;&nbsp;判断题</p>
            <div v-for="(question3,index3) in this.judge" style="margin-left: 20px;float: left;margin-bottom: 5px;">
             <button v-if="useranswer.judgewrong[index3]==index3" style="border: #DD6161 1px solid;border-radius: 17px;width: 34px;background-color: #DD6161;height: 34px;vertical-align:middle;
             text-align: center;font-size: 2px;font-weight: 300;color: white;" @click="judgeskip(index3)">{{index3+1}}</button>
              <button v-if="useranswer.judgewrong[index3]==-1"  @click="judgeskip(index3)" style="border: #A4DA89 1px solid;border-radius: 17px;width: 34px;background-color: #A4DA89;height: 34px;vertical-align:middle;
        text-align: center;font-size: 2px;font-weight: 300;color: white;">{{index3+1}}</button>
            </div>
          </div>
          <br>
          <!-- 填空题-->
          <div v-if="this.fill.length>0" style="float: left;width: 100%;">
            <p>&nbsp;&nbsp;填空题</p>
            <div v-for="(question4,index4) in this.fill" style="margin-left: 20px;float: left;margin-bottom: 5px;">
             <button v-if="useranswer.fillwrong[index4]==index4" style="border: #DD6161 1px solid;border-radius: 17px;width: 34px;background-color: #DD6161;height: 34px;vertical-align:middle;
             text-align: center;font-size: 2px;font-weight: 300;color: white;" @click="fillskip(index4)">{{index4+1}}</button>
              <button v-if="useranswer.fillwrong[index4]==-1 && useranswer.fillhalf[index4]==-1"  @click="fillskip(index4)" style="border: #A4DA89 1px solid;border-radius: 17px;width: 34px;background-color: #A4DA89;height: 34px;vertical-align:middle;
        text-align: center;font-size: 2px;font-weight: 300;color: white;">{{index4+1}}</button>
              <button v-if="useranswer.fillhalf[index4]==index4" @click="fillskip(index4)" style="border: #EBB563 1px solid;border-radius: 17px;width: 34px;background-color: #EBB563;height: 34px;vertical-align:middle;
        text-align: center;font-size: 2px;font-weight: 300;color: white;">{{index4+1}}</button>
            </div>
          </div>
          <!-- 简答题-->
            <div v-if="this.short.length>0" style="float: left;width: 100%;">
              <p>&nbsp;&nbsp;简答题</p>
              <div v-for="(question5,index5) in this.short" style="margin-left: 20px;float: left;margin-bottom: 5px;">
               <button v-if="useranswer.shortwrong[index5]==index5" @click="shortskip(index5)" style="border: #DD6161 1px solid;border-radius: 17px;width: 34px;background-color: #DD6161;height: 34px;vertical-align:middle;
          text-align: center;font-size: 2px;font-weight: 300;color: white;">{{index5+1}}</button>
                <button v-if="useranswer.shortwrong[index5]==-1 && useranswer.shorthalf[index5]==-1"  @click="shortskip(index5)" style="border: #A4DA89 1px solid;border-radius: 17px;width: 34px;background-color: #A4DA89;height: 34px;vertical-align:middle;
          text-align: center;font-size: 2px;font-weight: 300;color: white;">{{index5+1}}</button>
                <button v-if="useranswer.shorthalf[index5]==index5" @click="shortskip(index5)" style="border: #EBB563 1px solid;border-radius: 17px;width: 34px;background-color: #EBB563;height: 34px;vertical-align:middle;
          text-align: center;font-size: 2px;font-weight: 300;color: white;">{{index5+1}}</button>
              </div>
            </div>
        </div>
        </up>
      </div>
    </template>

<script>
import Pagination from "@/components/Pagination";
import axios from "axios";
import up from '@/components/up';
export default {
  //new Vue
  data() {
    return {
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      title: "添加",
      editForm: {
        id:"",
        account: "",
        password:"",
        status: "",
        roleId:""
        // token: localStorage.getItem("logintoken"),
      },
      // rules表单验证
      rules: {
        // deptName: [
        //   { required: true, message: "请输入部门名称", trigger: "blur" },
        // ],
        // deptNo: [
        //   { required: true, message: "请输入部门代码", trigger: "blur" },
        // ],
      },
      //子传父的数据存放位置 搜索用rabcManager
      formInline: {
        startPage: 1,
        limit: 5,
        UserExam:{}
        // token: localStorage.getItem("logintoken"),
      },
      listData: {}, //后端查出的列表用户数据
      single:[],  //单选
      multiple:[], //多选
      judge:[],  //判断
      fill:[],  //填空题
      short:[],  //简答题
      useranswer:{
        singleanswer:[],
        multipleanswer:[],
        judgeanswer:[],
        fillanswer:[],
        shortanswer:[],
        singlewrong:[],
        multiwrong:[],
        judgewrong:[],
        fillwrong:[],
        shortwrong:[],
        multihalf:[],
        fillhalf:[],
        shorthalf:[]
      },
      //单选和多选
      optionAnswer:{
        sin:[],
        multiple:[]
      },
      trueAnswer:{
        truesin:[],
        truemultiple:[]
      },
      value: ''
    };
  },
  // 注册组件  分页
  components: {
    Pagination,
    up
  },
  /**
   * 创建完毕  浏览器 加载我们的页面 自动触发的方法
   */
  created() {
    //直接在这里进行 axios(ajax)请求

    this.getData();
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 获取试卷详情表
    getData() {
        this.formInline.UserExam = JSON.parse(localStorage.userExam);
        console.log("--------------------------------------");
        console.log(this.formInline.UserExam);
        console.log("--------------------------------------");
        this.listData = JSON.parse(this.formInline.UserExam.paperInfo)
        console.log(this.listData);
        this.listData.questions.forEach(s=>{
          if(s.type==1){
            this.single.push(s);
          }else if(s.type == 2){
            this.multiple.push(s);
          }else if(s.type == 3){
            this.judge.push(s);
          }else if(s.type == 4){
              this.fill.push(s);
            }else if(s.type == 5){
              this.short.push(s);
            }
        });
       this.useranswer = this.listData.userAnswer;
       //单选学生答案
       this.useranswer.singleanswer.forEach(s=>{
         if(s!=null){
           let a = s.split(":");
           if(a[0]=='1'){
              this.optionAnswer.sin.push('A');
           }else if(a[0]=='2'){
             this.optionAnswer.sin.push('B');
           }else if(a[0]=='3'){
             this.optionAnswer.sin.push('C');
           }else if(a[0]=='4'){
             this.optionAnswer.sin.push('D');
           }
         }

       });
       //多选学生答案
       for(let i=0;i<this.multiple.length;++i){
         let b = "";
         this.useranswer.multipleanswer.forEach(m=>{
           if(m!=null){
             let a = m.split(":");
             console.log(a);
             if(a[0]==i){
               if(a[1]=='1'){
                  a[1]='A';
               }else if(a[1]=='2'){
                  a[1]='B';
               }else if(a[1]=='3'){
                  a[1]='C';
               }else if(a[1]=='4'){
                  a[1]='D';
               }
               b += a[1]+",";
             }
           }
         });
         this.optionAnswer.multiple.push(b.substring(0,b.length-1));
       }

       //正确答案(单选，多选)
       //单选
       this.single.forEach(s=>{
           s.optionList.forEach((o,index)=>{
             if(s.optionId==o.id){
               if(index==0){
                  this.trueAnswer.truesin.push('A');
               }else if(index==1){
                  this.trueAnswer.truesin.push('B');
               }else if(index==2){
                  this.trueAnswer.truesin.push('C');
               }else if(index==3){
                  this.trueAnswer.truesin.push('D');
               }
             }
           })
       });
       //正确多选
       this.multiple.forEach(m=>{
         let str = "";
         m.optionList.forEach((o,index)=>{
           if(m.optionId.indexOf(o.id)!=-1){
             if(index==0){
                str += 'A,';
             }else if(index==1){
                str += 'B,';
             }else if(index==2){
                str += 'C,';
             }else if(index==3){
                str += 'D,';
             }
           }
         })
          this.trueAnswer.truemultiple.push(str.substring(0,str.length-1));
         console.log(this.trueAnswer.truemultiple);
        })
    //用户答错题号
         let a = this.formInline.UserExam.wrongQuesId.split(":");
         console.log(a);
         let sin = a[0];
         let mu = a[1];
         let judge = a[2];
         let fill = a[3];
         let short = a[4];

        this.useranswer.singlewrong = sin.split(",");
        this.useranswer.multiwrong = mu.split(",");
        this.useranswer.judgewrong = judge.split(",");
        this.useranswer.fillwrong = fill.split(",");
        this.useranswer.shortwrong = short.split(",");
        console.log(this.useranswer.singlewrong);

        //用户半对题号
         let b = this.formInline.UserExam.halfQueId.split(":");
         console.log(b);
         this.useranswer.multihalf = b[1].split(",");
         this.useranswer.fillhalf = b[3].split(",");
         this.useranswer.shorthalf = b[4].split(",");
        console.log(this.useranswer.multihalf);
        console.log(this.useranswer.fillhalf);
        console.log(this.useranswer.shorthalf);
    },
    //跳转单选题
    sinskip(index){
      location.href="#sin"+index;
    },
    //跳转多选题
    multiskip(index){
      location.href="#multi"+index;
    },
    //跳转判断题
    judgeskip(index){
       location.href="#judge"+index;
    },
    //跳转填空题
    fillskip(index){
      location.href="#fill"+index;
    },
    //跳转简答题
    shortskip(index){
      location.href="#short"+index;
    },
    back(){
      localStorage.userExam = JSON.stringify(this.formInline.UserExam.information);
      this.$router.push({ path: '/exam/test/showuserexam'});
    }
  },
};
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userManager {
  width: 100%;
}
</style>
